<template>
    <span class="yorha-big-title">{{showTitle}}</span>
</template>

<script setup>
import {onMounted, ref} from "vue";
let props = defineProps(['title','speed'])
let showTitle = ref('')

/*
* 初始化
* */
function init() {
    let clock
    let index = 0
    clock = setInterval(()=>{
        showTitle.value+=props.title[index]
        index++
        if (index>=props.title.length) clearInterval(clock)
    },props.speed)
}
onMounted(()=>{
    init()
})
</script>

<style scoped>
.yorha-big-title {
    display: inline-block;
    font-size: 50px;
    color: rgb(78, 72, 59);
    text-shadow: 5px 5px rgb(165 157 131);
}
</style>